import Vue from 'vue'
import bus from '@/components/storybook/utilties/bus'
import { dashboardGadgetList } from '@/utils/data-json'
import { GlobalTimeformat } from '@/utils/common'
export const NameTemplate = Vue.component('NameTemplate', {
  template:
    `
      <el-link :underline="false" @click="onSelect">{{$data.data.name}}</el-link>
    `,
  methods: {
    onSelect () {
      bus.$emit('event:draw', this.$data.data)
    }
  }
})


export const BotNumberTemplate = Vue.component('BotNumberTemplate', {
  template:
    `
      <el-link size="mini" :underline="false" :type="type"  @click="onSelect">{{$data.data.botNum}}</el-link>
    `,
  computed: {
    type () {
      if (this.$data.data.botNum > 0) {
        return 'success'
      } else {
        return 'danger'
      }
    }
  },
  methods: {
    onSelect () {
      bus.$emit('event:select-bot-number', this.$data.data)
    }

  }
})
export const ReportNumberTemplate = Vue.component('ReportNumberTemplate', {
  template:
    `
      <el-link size="mini" :underline="false" :type="type"  @click="onSelect" >{{$data.data.reportNum}}</el-link>
    `,
  computed: {
    type () {
      if (this.$data.data.reportNum > 0) {
        return 'success'
      } else {
        return 'danger'
      }
    }
  },
  methods: {
    onSelect () {
      bus.$emit('event:select-report-number', this.$data.data)
    }

  }
})
export const RenderModelNumberTemplate = Vue.component('RenderModelNumberTemplate', {
  template:
    `
      <el-link size="mini" :underline="false" :type="type"  @click="onSelect" >{{$data.data.modelNum}}</el-link>
    `,
  computed: {
    type () {
      if (this.$data.data.modelNum > 0) {
        return 'success'
      } else {
        return 'danger'
      }
    }
  },
  methods: {
    onSelect () {
      bus.$emit('event:select-widget-number', this.$data.data)
    }

  }
})
export const ChartTemplate = Vue.component('ChartTemplate', {
  template:
    `
      <el-tooltip :open-delay="1000" effect="dark" :content="chart.title" :enterable="false" placement="top">
        <img style="width: 24px; height: 24px" :src="chart.imageUrl">
      </el-tooltip>
    `,
  computed: {
    chart () {
      const value = dashboardGadgetList.find(i => i.key === this.$data.data.gadgetType) || {}

      return value
    }
  }

})
export const IntegrationTemplate = Vue.component('IntegrationTemplate', {
  template:
    `
     <span>{{integrationName}}</span>
    `,
  computed: {
    integrationName () {
      return this.$data.data.integrationList.map(i => i.name).join()
    }
  }
})

export const LinkedBotsActionTemplate = Vue.component('LinkedBotsActionTemplate', {
  template:
    `
      <div class="flex items-center">
        <el-button plain size="mini" type="primary" @click="onView" >View</el-button>
        <el-button plain size="mini" type="danger" @click="onDelete" v-if="$hasPermission('sys:bots:delete')">Delete</el-button>
      </div>
    `,
  methods: {
    onView () {
      bus.$emit('event:view-linked-bot', this.$data.data)
    },
    onDelete () {
      bus.$emit('event:delete-linked-bot', this.$data.data)
    }
  }
})
export const JiraTemplate = Vue.component('JiraTemplate', {
  template:
    `
      <el-link size="mini" :underline="false" type="success"  :href="href"  target="_blank">{{$data.data.jiraNumber}}</el-link>
    `,
  computed: {
    href () {
      const jiraNumber = this.$data.data.jiraNumber || 'NA'

      if (jiraNumber.indexOf('http') === -1) {
        return `https://jira.mspbots.ai/browse/${jiraNumber}`
      }

      return jiraNumber
    }
  }
})
export const StatusTemplate = Vue.component('StatusTemplate', {
  template:
    `
      <span :style="{color:color}">
        {{$data.data.status}}
      </span>
    `,
  computed: {
    color () {
      switch (this.$data.data.status) {
        case 'Requested':
          return 'black'
        case 'In-Dev':
          return 'red'
        case 'Alpha':
          return '#E6A23C'
        case 'Published':
          return 'green'
      }
    }
  }
})
export const BussinessTypeTemplate = Vue.component('BussinessTypeTemplate', {
  template:
    `
      <span :style="{fontWeight:color}">
        {{$data.data.businessType}}
      </span>
    `,
  computed: {
    color () {
      switch (this.$data.data.businessType) {
        case 'Custom':
          return 'bold'
        default:
          return ''
      }
    }
  }
})
export const TimeFormatTemplate = Vue.component('TimeFormatTemplate', {
  template:
    `
      <span>
        {{timeformat($data.data.updateTime||$data.data.updateDate)}}
      </span>
    `,
  methods: {
    timeformat (time) {
      return GlobalTimeformat(time, 'HH:mm')
    }
  }
})

export const RenderName = () => {
  return {
    template: NameTemplate
  }
}

export const RenderBotNumber = () => {
  return {
    template: BotNumberTemplate
  }
}
export const RenderReportNumber = () => {
  return {
    template: ReportNumberTemplate
  }
}
export const RenderModelNumber = () => {
  return {
    template: RenderModelNumberTemplate
  }
}
export const RenderChart = () => {
  return {
    template: ChartTemplate
  }
}
export const RenderIntegration = () => {
  return {
    template: IntegrationTemplate
  }
}

export const RenderLinkedBotsAction = () => {
  return {
    template: LinkedBotsActionTemplate
  }
}
export const RenderJira = () => {
  return {
    template: JiraTemplate
  }
}
export const RenderStatus = () => {
  return {
    template: StatusTemplate
  }
}
export const RenderBussinessType = () => {
  return {
    template: BussinessTypeTemplate
  }
}
export const RenderTimeFormat = () => {
  return {
    template: TimeFormatTemplate
  }
}
